import { useEffect, useState } from "react";
import moment from 'moment';
import CommonModal from "@/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import { Checkbox, Row, Col, Form, message, Switch, Popover, TimePicker } from "antd";
import { takeFieldSettings, editTakeFieldSettings, editTakeFieldSettingsNew } from "../service";
import IconFont from "@/components/IconFont";
import styles from './index.module.less'

const orderList = [
	{ label: "订单商品编码", value: "0" },
	{ label: "订单商品名称", value: "1" },
	{ label: "订单颜色规格", value: "2" },
	{ label: "订单款式编码", value: "3" }
];

const sortConfig = [
	{ label: '供应商名称', value: '0', disabled: true },
	{ label: '系统款式编码', value: '1', disabled: false },
	{ label: '系统商品编码', value: '2', disabled: false },
	{ label: '系统商品颜色', value: '3', disabled: false },
	{ label: '系统商品尺寸', value: '4', disabled: false },
	{ label: '付款时间(正序)', value: '5', disabled: false },
]

const exceptionTypeConfig = [
	{ label: "手动标记异常", value: "0" },
	{ label: "其他原因", value: "1" },
	{ label: "到货时间", value: "2" },
	{ label: "不确定何时有货", value: "5" },
	{ label: "下架", value: "6" },
	{ label: "门店未开门", value: "7" },
]

/** 拿货设置 */
function NahuoConfig({ handleCancel }) {

	const [isOk, setIsOk] = useState(false);

	const [open, setOpen] = useState(false);

	const [form] = Form.useForm();

	useEffect(() => {
		setOpen(true);
		getTakeFieldSettings();
	}, []);

	//查询拿货配置详情
	const getTakeFieldSettings = async () => {
		START_LOADING();
		const { success, data = {} } = await takeFieldSettings();
		END_LOADING();
		if (success) {
			const { showConfig = "", sortConfig = "", exceptionType = "", exceptionStatus, exceptionTime } = data;
			form.setFieldsValue({
				showConfig: showConfig.split(','),
				sortConfig: sortConfig.split(','),
				exceptionType: exceptionType?.split(','),
				exceptionStatus: exceptionStatus === 1 ? true : false,
				exceptionTime: exceptionTime ? moment(exceptionTime, 'HH:mm:ss') : moment('03:00:00', 'HH:mm:ss')
			})
		};
	}

	//保存配置信息
	const handleEditConfig = async (val) => {
		START_LOADING();
		const { success, msg = "操作成功" } = await editTakeFieldSettingsNew({
			exceptionStatus: val?.exceptionStatus ? 1 : 0,
			showConfig: val.showConfig?.join(),
			sortConfig: val.sortConfig?.join(),
			exceptionType: val?.exceptionType?.join(),
			exceptionTime: val?.exceptionTime?.format('HH:mm:ss')
		});
		END_LOADING();
		if (success) {
			message.success(msg);
			setIsOk(true);
			setOpen(false);
		}
	};

	//点击确定
	const onOk = () => {
		form.validateFields().then(val => {
			handleEditConfig(val);
		}).catch(err => {
			console.log(err, 'err')
		})
	};

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		if (isOk) {
			handleCancel();
		} else {
			handleCancel();
		}
	};

	//问号图标内容展示
	const PopoverRender = content => {
		return (
			<Popover content={<div style={{ width: "200px" }}>{content}</div>}>
				<div>
					<IconFont type="iconwenhao1" />
				</div>
			</Popover>
		);
	};

	return (
		<CommonModal title="拿货设置" afterClose={afterClose} open={open} width="600px" onOk={onOk} onCancel={onCancel}>
			<Form
				name="nahuo-modal-form"
				form={form}
				labelCol={{ span: 7 }}
				wrapperCol={{ span: 17 }}
				autoComplete="off"
			>
				<SubTitle symbol as="s2" title="字段设置" wrapStyle={{ marginBottom: '12px' }} />
				<Form.Item
					label="拿货APP商品字段显示："
					name="showConfig"
					rules={[
						{
							required: true,
							message: '至少选择一个字段显示!',
						},
					]}
				>
					<Checkbox.Group>
						<Row gutter={[0, 16]}>
							{orderList.map(item => (
								<Col key={item.value} span={8}>
									<Checkbox key={item.value} value={item.value}>
										{item.label}
									</Checkbox>
								</Col>
							))}
						</Row>
					</Checkbox.Group>
				</Form.Item>
				<SubTitle symbol as="s2" title="唯一码打印排序" wrapStyle={{ marginBottom: '12px' }} />
				<Form.Item
					label="选择需要排序的字段："
					name="sortConfig"
					extra={<span style={{ fontSize: 12 }}>选择后按字段相同或时间顺序排序打印唯一码标签（包括拿货APP）</span>}
				>
					<Checkbox.Group>
						<Row gutter={[0, 16]}>
							{sortConfig.map(item => (
								<Col key={item.value} span={8}>
									<Checkbox key={item.value} value={item.value} disabled={item.disabled}>
										{item.label}
									</Checkbox>
								</Col>
							))}
						</Row>
					</Checkbox.Group>
				</Form.Item>
				<SubTitle
					titleClassName={styles.markException}
					symbol
					as="s2"
					title="自动取消异常标记"
					wrapStyle={{ marginBottom: '12px' }}
					suffix={<>
						<Form.Item name="exceptionStatus" valuePropName="checked">
							<Switch size="default" />
						</Form.Item>
					</>}
					suffixStyle={{
						marginLeft: '8px',
					}}
				/>
				<Row
					gutter={4}
					className={styles.markException}
					style={{
						marginBottom: '12px'
					}}
				>
					<Col>每天</Col>
					<Col>
						<Form.Item name="exceptionTime">
							<TimePicker style={{ width: '150px' }} allowClear={false} />
						</Form.Item>
					</Col>
					<Col>
						<div style={{ display: "flex" }}>
							自动取消异常标记
							{PopoverRender("配置需要开启后选择时间与勾选执行自动取消的标签，两者有一个未进行配置则无法执行自动取消异常标签")}
						</div>
					</Col>
				</Row>
				<Form.Item
					label="自动取消异常标签："
					name="exceptionType"
				>
					<Checkbox.Group>
						<Row gutter={[0, 16]}>
							{exceptionTypeConfig.map(item => (
								<Col key={item.value} span={8}>
									<Checkbox key={item.value} value={item.value}>
										{item.label}
									</Checkbox>
								</Col>
							))}
						</Row>
					</Checkbox.Group>
				</Form.Item>
			</Form>
		</CommonModal>
	);
}

export default NahuoConfig;
